<template>
  <v-card>
    <!--    <v-toolbar card dense color="transparent">-->
    <v-toolbar flat dense color="transparent">
      <v-toolbar-title><h4>Order</h4></v-toolbar-title>
      <v-spacer />
      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn>
    </v-toolbar>
    <v-divider />
    <v-card-text class="pa-0">
      <template>
        <v-data-table
          :headers="headers"
          :items="items"
          hide-default-footer
          class="elevation-0 table-striped"
        >
          <!--            <v-data-table-->
          <!--                    :headers="headers"-->
          <!--                    :items="items"-->
          <!--                    hide-actions-->
          <!--                    class="elevation-0 table-striped"-->
          <!--            >-->
          <!--          <template slot="items" slot-scope="props">-->
          <template v-slot:item="{ item }">
            <tr>

              <td>{{ item.id }}</td>
              <td class="text-xs-left">{{ item.product }}</td>
              <td class="text-xs-left">{{ item.price }}</td>
              <td class="text-xs-left"><v-chip label small :color="getColorByStatus(item.status)" text-color="white">{{ item.status }}</v-chip></td>
            </tr>
          </template>
        </v-data-table>
      </template>
      <v-divider />
    </v-card-text>
  </v-card>
</template>

<script>
import items from '@/api/order'
export default {
  data() {
    return {
      headers: [
        {
          text: '#',
          align: 'left',
          sortable: false,
          value: 'id'
        },
        { text: 'Product', value: 'deadline' },
        { text: 'Price', value: 'progress' },
        { text: 'Status', value: 'status' }

      ],
      items: items,
      colors: {
        processing: 'blue',
        sent: 'red',
        delivered: 'green'
      }
    }
  },
  computed: {
    randomColor() {
      const item = Math.floor(Math.random() * this.colors.length)
      return this.colors[item]
    }
  },
  methods: {
    getColorByStatus(status) {
      return this.colors[status]
    }
  }
}
</script>
